<template>
  <view class="tabbar-box" :style="{ 'padding-bottom': deviceType === 'android' ? '40rpx' : '' }">
    <view class="tabbar-box-item" v-for="(item, index) in tabbarList" @click="goPage(item)" :key="index">
      <button v-if="item.type=='add'" class="btn">+</button>
      <!-- 徽标 -->
      <up-badge type="error" v-for="v in badgeData" max="99" :key="index" :value="item.type === v.name ? v.number:0"
                :absolute="true" :offset="[2,-2]"></up-badge>
      <text :class="props.type === item.type ? 'active':''">
        {{ item.title }}
      </text>
    </view>
  </view>
</template>

<script setup>
import {
  ref,
  onMounted
} from 'vue';

let deviceType = ref(''); //设备信息 （主要定制安卓机型的底部安全区）
let length = ref('') //message 徽标
onMounted(() => {
  deviceType.value = uni.getSystemInfoSync().osName;
  length.value = JSON.stringify(uni.getStorageSync('length'))
  console.log(length.value);
});
const badgeData = [{
  name: 'home',
  number: '0'
},
  {
    name: 'city',
    number: '0'
  },
  {
    name: 'message',
    number: length.value
  },
  {
    name: 'mine',
    number: '0'
  },
]
const props = defineProps({
  type: {
    type: String,
    default: 'home',
  }
});

let tabbarList = ref([{
  title: '首页',
  type: 'home',
  path: '/pages/tab-index/index'
},
  {
    title: '同城',
    type: 'city',
    path: '/pages/tab-same-city/index'
  },
  {
    title: '发布',
    type: 'add',
    path: '/pages/tab-publish-content/index',
    url: '../static/images/1101_03.png',
    activeUrl: '../static/images/1101_03.png'
  },
  {
    title: '消息',
    type: 'message',
    path: '/pages/tab-message/index',
  },
  {
    title: '我',
    type: 'mine',
    path: '/pages/tab-mine/index'
  }
]);

function goPage(item) {
  if (item.type == props.type) return;
  uni.switchTab({
    url: item.path,
  });
}
</script>

<style lang="scss" scoped>
.active {
  font-weight: 700;
  font-size: 40rpx;
  color: black !important;
}

.tabbar-box {
  z-index: 1000;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 20rpx;
  //底部安全区
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  width: 100%;
  background: #fff;
  border-radius: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .tabbar-box-item {
    position: relative;
    height: 70rpx;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    image {
      width: 80rpx;
      height: 80rpx;
      position: absolute;
      left: 25rpx;
      // top: 0rpx;
    }

    font-size: 35rpx;
    font-weight: 500;
    color: #999999;
  }
}

.btn {
  font-size: 50rpx;
  width: 90rpx;
  height: 60rpx;
  background-color: rgb(255, 84, 106);
  color: white;
  line-height: 50rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>